<template>
  <div>
    <el-table
      :data="reset"
      :header-cell-style="{background:'#eef1f6',color:'#909399'}"
      @selection-change="change"
      border
      style="width: 100%">
      <el-table-column
        align="center"
        type="selection"
        width="45">
      </el-table-column>
      <el-table-column
        :index="indexMethod"
        align="center"
        label="序号"
        type="index"
        width="50">
      </el-table-column>

      <!-- <el-table-column
        width="40"
        type="expand">

      </el-table-column> -->

      <el-table-column
        align="center"
        label="平台销售订单"
        prop="NetOrderId"
        width="140">
        <template slot-scope="scope">
          <span @click="looking(scope.row)" style="color:#46a6ff;cursor:pointer">{{scope.row.NetOrderId}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="客户名称"
        prop="Name"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        label="订单类型"
        prop="OrderTypeFormat"
        width="100">
      </el-table-column>
      <el-table-column
        align="center"
        label="订单金额"
        prop="OrderFee"
        sortable
        width="110">
      </el-table-column>
      <el-table-column
        align="center"
        label="支付方式"
        prop="PaymentTypeFormat"
        width="90">
      </el-table-column>
      <el-table-column
        align="center"
        label="配送方式"
        prop="ShippingCompanyName">
        <template slot-scope="scope">
          <span @click="distribution(scope.row)"
                style="color:#46a6ff;cursor:pointer">{{scope.row.ShippingCompanyName}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="运输方式"
        prop="ExpressTypeFormat">
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        label="付款时间"
        prop="PaymentTime"
        sortable>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        label="创建时间"
        prop="CreateTime"
        sortable>
      </el-table-column>
      <el-table-column
        align="center"
        label="订单状态"
        prop="StatusFormat">
        <template slot-scope="scope">
          <span style="backgroundColor:#ff9800;color:#fff" v-if="scope.row.Status=== 2">
            {{scope.row.StatusFormat}}
          </span>
          <span style="backgroundColor:#42b983;color:#fff" v-else-if="scope.row.Status=== 4">
            {{scope.row.StatusFormat}}
          </span>
          <span style="backgroundColor:#fff" v-else>
            {{scope.row.StatusFormat}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="订单优先级"
        prop="PriorityFormat"
        sortable
        width="120">
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        width="100"
        fixed="right"
      >
        <template slot-scope="scope">
           <el-button type="primary" plain round size="mini" @click="handleSuspend(scope.row)" v-if="scope.row.Status !== 0">暂停</el-button>
           <el-button plain round  size="mini" @click="handleRecovery(scope.row)" v-if="scope.row.Status === 0">恢复</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 快递路由信息 -->
    <el-dialog :close-on-click-modal='false' :visible.sync="expressage" center title="快递详情" width="600px">
      <div class="thumbs">
        <div style="width:100%;display:flex;justify-content : space-between;">
          <div class="title">
            快递轨迹
          </div>
          <div>
            订单号：{{orderId}}
          </div>
        </div>
        <div class="paging" style="margin:10px 0">
          <el-pagination
            :page-size="1"
            :total=listRouter.length
            @current-change="handleCurrentChangeRouter"
            layout="prev, pager, next"
            small>
          </el-pagination>
        </div>
        <!-- <div class="hint">暂无物流信息</div> -->
        <div class="order-step">
          <el-timeline>
            <el-timeline-item
              :color="activity.color"
              :key="index"
              :size="activity.size"
              :timestamp="activity.accept_time"
              v-for="(activity, index) in ShippingRouteInfos"
            >
              {{activity.remark}}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>

    <el-dialog fullscreen :close-on-click-modal='false' :visible.sync="Dialog1Visible" center width="1200px">
      <!-- 照片明细弹出框 -->
      <el-dialog :close-on-click-modal='false' :visible.sync="photoDialogLogVisible" append-to-body center title="照片明细"
                 width="600px">
        <div class="thumbs">
          <vue-preview :slides="slide1"></vue-preview>
        </div>
      </el-dialog>

      <!-- sn条码弹出框 -->
      <el-dialog :close-on-click-modal='false' :visible.sync="SNDialogLogVisible" append-to-body center title="SN条码展示"
                 width="600px">
        <el-table
          :data="slide1"

          :header-cell-style="{background:'#eef1f6',color:'#909399'}"
          border
          height="485px"
          style="width: 100%">
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            align="center"
            label="照片名称"
            prop="FileName">
          </el-table-column>
          <el-table-column
            align="center"
            label="照片条码"
            prop="OrderFileCode">
          </el-table-column>
        </el-table>
        <!-- <p v-if="loading">加载中...</p>
        <p v-if="noMore">没有更多了</p> -->
      </el-dialog>

      <el-table
        :data="productData"
        :header-cell-style="{background:'#eef1f6',color:'#909399'}"
        border
        style="width:98%">
        <!-- <el-table-column
        prop="OrderProductId"
        label="序号"
        width="50">
        </el-table-column> -->
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          align="center"
          label="产品编码"
          prop="ProductCode"
          width="80">
        </el-table-column>

        <el-table-column
          align="center"
          prop="CtmName"
          show-overflow-tooltip
          label="客人名"
          width="200">
        </el-table-column>

        <el-table-column
          @cell-click="handleCurrentChange"
          align="center"
          label="产品名称"
          prop="ProductName"
          width="150">
          <template slot-scope="scope">
            <span @click="lookphoto(scope.row)" style="color:#0095FF;cursor:pointer">{{scope.row.ProductName}}</span>
            <!-- <span @cell-click="handleCurrentChange(scope.row)" style="color:#0095FF;cursor:pointer">{{scope.row.ProductName}}</span> -->
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="照片张数"
          prop="PhotoNum"
          width="80">
        </el-table-column>
        <el-table-column
          align="center"
          label="规格"
          prop="ProductSize"
          width="100">
        </el-table-column>
        <el-table-column
          align="center"
          label="总面积"
          prop="ProductArea"
          width="100">
        </el-table-column>
        <el-table-column
          align="center"
          label="SN条形码"
          prop="OrderProductCode"
          width="140">
          <template slot-scope="scope">
            <span @click="lookSnCode(scope.row)"
                  style="color:#0095FF;cursor:pointer">{{scope.row.OrderProductCode}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="下一道工序"
          prop="CurTechName">
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          align="center"
          label="所属排程"
          prop="ProductionPlanNo">
        </el-table-column>
        <el-table-column
          align="center"
          label="更新时间"
          prop="CurTechUpdateTime"
          width="155">
        </el-table-column>
        <el-table-column
          align="center"
          label="状态"
          prop="StatusFormat">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="100"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button type="primary" plain round size="mini" @click="handleDeatilSuspend(scope.row)" v-if="scope.row.Status !== 0">暂停</el-button>
            <el-button plain round  size="mini" @click="handleDetailRecovery(scope.row)" v-if="scope.row.Status === 0">恢复</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column
        prop="address"
        label="产品金额"
        align="center"
        width="100">
        </el-table-column> -->
      </el-table>

    </el-dialog>
  </div>
</template>


<script>
  import {
    orderMessage,
    getOrderFileDOList,
    expressMessage,
    getOrderProductDOList,
    PauseOrder,
    ResumeOrder,
    PauseOrderProduct,
    ResumeOrderProduct,
    getData
  } from '@/api/project'
  import { ERR_OK } from '@/utils/commons'
  import Pagination from '@/components/Pagination'

  export default {
    props: {
      reset: {
        type: Array
      },
      init:{
        type: Function

      }
    },
    data() {
      return {
        // column:{
        //   prop:'Name,OrderFee,PaymentTime,CreateTime,PriorityFormat',
        //   order:'ascending'
        // },
        loading: false,
        currentRow: {},
        count: [],
        slide1: [],
        productData: [],
        Dialog1Visible: false,
        photoDialogLogVisible: false,
        SNDialogLogVisible: false,
        expressage: false,  //  快递的弹出框 默认为隐藏
        listRouter: [],  //快递全部路由信息
        list: [], //单条快递路由信息
        orderId: 0,  //快递对应的单号
        ShippingRouteInfos: []
      }
    },
    // computed: {
    //   noMore () {
    //     return this.count >= this.slide1.length
    //   },
    //   disabled () {
    //     return this.loading || this.noMore
    //   }
    // },
    methods: {
      // 路由切换
      handleCurrentChangeRouter(val) {
        this.list = this.listRouter[val - 1]
        this.orderId = this.listRouter[val - 1].ShippingNo
        this.ShippingRouteInfos = this.listRouter[val - 1].ShippingRouteInfos
      },
      // 配送方式  弹出框
      distribution(el) {
        // if(el.StatusFormat=="已发货"){
        this.expressage = true
        expressMessage({ netOrderId: el.NetOrderId }).then((res) => {
          this.listRouter = res.Result
          // this.list=this.listRouter[0]
          this.listRouter.forEach(el => {
            el.ShippingRouteInfos.reverse()
          })
          this.ShippingRouteInfos = this.listRouter[0].ShippingRouteInfos
          this.orderId = this.listRouter[0].ShippingNo
        }).catch((error) => {
          this.listRouter = []
          this.orderId = 0
          this.list = []
          this.ShippingRouteInfos = []
          console.log(error)
        })
        // }else{
        //   this.$message({
        //   message: '暂无物流信息',
        //   type: 'warning'
        //   });
        // }
      },
      change(data) {
        this.$emit('changeData', data)
      },
      indexMethod(index) {
        return (index + 1) + (this.$parent.currentPage - 1) * this.$parent.size
      },
      lookphoto(row) {
        console.log(row)
        this.handleCurrentChange(row)
      },
      handleCurrentChange(row) {
        console.log(row)
        this.currentRow = row
        //获取照片明细
        getOrderFileDOList({ orderProductID: parseInt(this.currentRow.OrderProductId) }).then(res => {
          if (parseInt(res.Code) === 1) {
            this.photoDialogLogVisible = true
          }
          res.Result.forEach(item => {
            item.src = item.CompressPath
            item.msrc = item.CompressPath
            item.alt = item.FileName
            item.title = item.FileName
            item.w = 400
            item.h = 450
          })
          this.slide1 = res.Result
        })
          .catch(error => {
            console.log(error)
            Toast({
              message: '获取缩略图图片失败...'
            })
          })
      },
      lookSnCode(row) {
        this.currentRow = row
        // this.SNDialogLogVisible = true
        getOrderFileDOList({ orderProductID: parseInt(this.currentRow.OrderProductId) }).then(res => {
          if (parseInt(res.Code) === 1) {
            this.SNDialogLogVisible = true
            this.slide1 = res.Result
            // this.count = res.Result
          }
        }).catch(res => {
        })
      },
      // load(){
      //   this.loading = true
      //   setTimeout(() => {
      //     for(var i=0; i<=10; i++){
      //       this.count.push(this.slide1[i*10])
      //     }
      //     Math.ceil(this.slide1.length/10)
      //     this.loading = false
      //   }, 500)
      // },
      // 点击订单号弹出产品详情
      looking(row) {
        this.productData = []
        getOrderProductDOList({ orderBagID: parseInt(row.OrderbagId) }).then(res => {
          if (parseInt(res.Code) === 1) {
            this.Dialog1Visible = true
            this.productData = res.Result
            this.order = row
          }
        })
      },
      async handleSuspend(row){
        console.log(row,443)
        const { OrderbagId } = row
        const {Result,Code} = await PauseOrder({OrderbagId})
        if(Code === ERR_OK){
          this.init();
        }
      },
      async handleRecovery(row){
        const { OrderbagId } = row
        const {Result,Code} = await ResumeOrder({OrderbagId})
        if(Code === ERR_OK){
          this.init();
        }
      },
      async handleDeatilSuspend(row){
        const orderProductIds = [row.OrderProductId]
        const {Result,Code} = await PauseOrderProduct(
          orderProductIds
        )
        if(Code === ERR_OK){
            this.looking(this.order);
        }
      },
      async handleDetailRecovery(row){
        const orderProductIds = [row.OrderProductId]
        const {Result,Code} = await ResumeOrderProduct(
          orderProductIds
        )
        if(Code === ERR_OK){
          this.looking(this.order);
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .thumbs {
    height: 400px;
    // background-color: #eee;
    overflow-x: hidden;

    /deep/ .my-gallery {
      display: flex;
      flex-wrap: wrap;

      figure {
        width: 23%;
        margin: 5px;
        float: left;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

</style>
